<template>
  <BackHeader :title="lang.levels_title" />
  <div class="app_center activity-page">
    <ul class="list_ul">
      <li
        v-for="levelGroup in levelGroups"
        :key="levelGroup.id"
        class="list_ul_li"
      >
        <div class="list_ul_li_container">
          <div class="b_container">
            <ul>
              <li v-for="level in levelGroup.levels" :key="level.id">
                <div class="t_data">
                  <NuxtImg
                    class="level_img"
                    :src="level.image"
                    :alt="level.name"
                  />
                  <div class="level_box_info">
                    <div class="level_name" :style="{ color: level.color }">
                      {{ level.name }}
                    </div>
                    <div class="level_amount">
                      {{ lang.levels_play }} {{ userStore.moneyUnit }}
                      {{ level.requirement }}
                    </div>
                  </div>
                  <div class="level_btn">
                    <div class="sl_box_shadow">
                      <div>
                        <NuxtImg
                          src="/images/activity/vip/BonusCabinet_8.png"
                          alt=""
                        />
                        <span>{{ lang.levels_receive }}</span>
                      </div>
                      <div>{{ userStore.moneyUnit }} {{ level.bonus }}</div>
                    </div>
                    <div class="mask"></div>
                  </div>
                </div>
                <div
                  class="el-progress el-progress--line is-exception el-progress_box"
                  role="progressbar"
                  :aria-valuenow="level.progress"
                  aria-valuemin="0"
                  aria-valuemax="100"
                >
                  <div class="el-progress-bar">
                    <div class="el-progress-bar__outer">
                      <div
                        class="el-progress-bar__inner"
                        :style="{
                          width: level.progress + '%',
                          animationDuration: '3s',
                          backgroundColor: level.color,
                        }"
                      ></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
            <p class="p_txt">
              {{ lang.levels_bonus_formula }}
            </p>
            <div class="level_rule_box">
              <div class="level_rule_box_title">
                {{ lang.levels_withdrawal_limit }}
              </div>
              <div class="level_rule_box_info">
                <div class="txt">
                  <div>{{ lang.levels_withdrawal_fee }}</div>
                  <div>{{ levelGroup.withdrawalFee }}</div>
                </div>
                <div class="txt">
                  <div>{{ lang.levels_daily_limit }}</div>
                  <div>{{ levelGroup.dailyLimit }}</div>
                </div>
                <div class="txt">
                  <div>{{ lang.levels_daily_times }}</div>
                  <div>{{ levelGroup.dailyTimes }}</div>
                </div>
                {{ lang.levels_cashback_bonus }}
              </div>
              <div class="rate_list">
                <div
                  v-for="(rate, index) in levelGroup.rates"
                  :key="index"
                  class="rate_list_box"
                >
                  <div :style="{ color: rate.color || 'rgb(230, 199, 0)' }">
                    {{ rate.value }}
                  </div>
                  <div>{{ rate.label }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const lang: any = getCurrentPageLang("activity/vip");
const userStore = useUserStore();

// VIP等级组数据
const levelGroups = ref([
  {
    id: 1,
    name: "Novatos",
    levels: [
      {
        id: 1,
        name: "Novatos 1",
        requirement: "10,00",
        bonus: "0,25",
        image: "/images/user/vipSignIn_0.png",
        color: "rgb(230, 199, 0)",
        progress: 40,
      },
    ],
    withdrawalFee: "0%",
    dailyLimit: "50000",
    dailyTimes: "10",
    rates: [
      { value: "0.3%", label: lang.levels_cashback_bonus },
      { value: "0%", label: lang.levels_daily_bonus },
      { value: "0.1%", label: lang.levels_weekly_bonus },
      { value: "0%", label: lang.levels_monthly_bonus },
    ],
  },
  {
    id: 2,
    name: "Bronze",
    levels: [
      {
        id: 2,
        name: "Bronze 1",
        requirement: "100,00",
        bonus: "1,00",
        image: "/images/user/vipSignIn_1.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 3,
        name: "Bronze 2",
        requirement: "500,00",
        bonus: "3,00",
        image: "/images/user/vipSignIn_1.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 4,
        name: "Bronze 3",
        requirement: "1.500,00",
        bonus: "5,00",
        image: "/images/user/vipSignIn_1.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 5,
        name: "Bronze 4",
        requirement: "3.000,00",
        bonus: "8,00",
        image: "/images/user/vipSignIn_1.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
    ],
    withdrawalFee: "0%",
    dailyLimit: "50000",
    dailyTimes: "10",
    rates: [
      { value: "0.6%", label: lang.levels_cashback_bonus },
      { value: "0.3%", label: lang.levels_daily_bonus },
      { value: "0.1%", label: lang.levels_weekly_bonus },
      { value: "0.1%", label: lang.levels_monthly_bonus },
    ],
  },
  {
    id: 3,
    name: "Prata",
    levels: [
      {
        id: 6,
        name: "Prata 1",
        requirement: "6.000,00",
        bonus: "10,00",
        image: "/images/user/vipSignIn_2.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 7,
        name: "Prata 2",
        requirement: "10.000,00",
        bonus: "12,00",
        image: "/images/user/vipSignIn_2.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 8,
        name: "Prata 3",
        requirement: "15.000,00",
        bonus: "15,00",
        image: "/images/user/vipSignIn_2.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 9,
        name: "Prata 4",
        requirement: "30.000,00",
        bonus: "30,00",
        image: "/images/user/vipSignIn_2.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 10,
        name: "Prata 5",
        requirement: "50.000,00",
        bonus: "50,00",
        image: "/images/user/vipSignIn_2.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
    ],
    withdrawalFee: "0%",
    dailyLimit: "50000",
    dailyTimes: "10",
    rates: [
      { value: "0.6%", label: lang.levels_cashback_bonus },
      { value: "0.5%", label: lang.levels_daily_bonus },
      { value: "0.2%", label: lang.levels_weekly_bonus },
      { value: "0.3%", label: lang.levels_monthly_bonus },
    ],
  },
  {
    id: 4,
    name: "Ouro",
    levels: [
      {
        id: 11,
        name: "Ouro 1",
        requirement: "100.000,00",
        bonus: "100,00",
        image: "/images/user/vipSignIn_3.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 12,
        name: "Ouro 2",
        requirement: "200.000,00",
        bonus: "250,00",
        image: "/images/user/vipSignIn_3.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 13,
        name: "Ouro 3",
        requirement: "400.000,00",
        bonus: "400,00",
        image: "/images/user/vipSignIn_3.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 14,
        name: "Ouro 4",
        requirement: "500.000,00",
        bonus: "500,00",
        image: "/images/user/vipSignIn_3.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 15,
        name: "Ouro 5",
        requirement: "600.000,00",
        bonus: "600,00",
        image: "/images/user/vipSignIn_3.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
    ],
    withdrawalFee: "0%",
    dailyLimit: "80000",
    dailyTimes: "15",
    rates: [
      { value: "0.6%", label: lang.levels_cashback_bonus },
      { value: "0.5%", label: lang.levels_daily_bonus },
      { value: "0.2%", label: lang.levels_weekly_bonus },
      { value: "0.3%", label: lang.levels_monthly_bonus },
    ],
  },
  {
    id: 5,
    name: "Platina",
    levels: [
      {
        id: 16,
        name: "Platina 1",
        requirement: "700.000,00",
        bonus: "700,00",
        image: "/images/user/vipSignIn_4.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 17,
        name: "Platina 2",
        requirement: "850.000,00",
        bonus: "750,00",
        image: "/images/user/vipSignIn_4.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 18,
        name: "Platina 3",
        requirement: "1.000.000,00",
        bonus: "800,00",
        image: "/images/user/vipSignIn_4.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 19,
        name: "Platina 4",
        requirement: "1.250.000,00",
        bonus: "850,00",
        image: "/images/user/vipSignIn_4.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 20,
        name: "Platina 5",
        requirement: "1.500.000,00",
        bonus: "1.000,00",
        image: "/images/user/vipSignIn_4.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
    ],
    withdrawalFee: "0%",
    dailyLimit: "80000",
    dailyTimes: "20",
    rates: [
      { value: "0.8%", label: lang.levels_cashback_bonus },
      { value: "0.7%", label: lang.levels_daily_bonus },
      { value: "0.2%", label: lang.levels_weekly_bonus },
      { value: "0.4%", label: lang.levels_monthly_bonus },
    ],
  },
  {
    id: 6,
    name: "Diamante",
    levels: [
      {
        id: 21,
        name: "Diamante 1",
        requirement: "5.000.000,00",
        bonus: "1.500,00",
        image: "/images/user/vipSignIn_5.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 22,
        name: "Diamante 2",
        requirement: "7.500.000,00",
        bonus: "2.500,00",
        image: "/images/user/vipSignIn_5.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 23,
        name: "Diamante 3",
        requirement: "9.000.000,00",
        bonus: "5.000,00",
        image: "/images/user/vipSignIn_5.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 24,
        name: "Diamante 4",
        requirement: "10.000.000,00",
        bonus: "12.500,00",
        image: "/images/user/vipSignIn_5.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
      {
        id: 25,
        name: "Diamante 5",
        requirement: "15.000.000,00",
        bonus: "27.500,00",
        image: "/images/user/vipSignIn_5.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
    ],
    withdrawalFee: "0%",
    dailyLimit: "80000",
    dailyTimes: "30",
    rates: [
      { value: "0.8%", label: lang.levels_cashback_bonus },
      { value: "0.7%", label: lang.levels_daily_bonus },
      { value: "0.2%", label: lang.levels_weekly_bonus },
      { value: "0.5%", label: lang.levels_monthly_bonus },
    ],
  },
  {
    id: 7,
    name: "Diamante de Sangue",
    levels: [
      {
        id: 26,
        name: "Diamante de Sangue",
        requirement: "50.000.000,00",
        bonus: "200.000,00",
        image: "/images/user/vipSignIn_6.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
    ],
    withdrawalFee: "0%",
    dailyLimit: "80000",
    dailyTimes: "40",
    rates: [
      { value: "0.8%", label: lang.levels_cashback_bonus },
      { value: "0.7%", label: lang.levels_daily_bonus },
      { value: "0.2%", label: lang.levels_weekly_bonus },
      { value: "0.6%", label: lang.levels_monthly_bonus },
    ],
  },
  {
    id: 8,
    name: "Vibranium",
    levels: [
      {
        id: 27,
        name: "Vibranium",
        requirement: "100.000.000,00",
        bonus: "250.000,00",
        image: "/images/user/vipSignIn_7.png",
        color: "rgb(230, 199, 0)",
        progress: 0,
      },
    ],
    withdrawalFee: "0%",
    dailyLimit: "100000",
    dailyTimes: "50",
    rates: [
      { value: "0.8%", label: lang.levels_cashback_bonus },
      { value: "1%", label: lang.levels_daily_bonus },
      { value: "0.2%", label: lang.levels_weekly_bonus },
      { value: "0.7%", label: lang.levels_monthly_bonus },
    ],
  },
]);
</script>

<style scoped lang="scss">
.list_ul {
  .list_ul_li {
    margin-bottom: 0.3rem;
    padding: 0.4rem 0.2rem;
    box-sizing: border-box;
    background: var(--theme-color4);
    border-radius: var(--border-radius);
    color: #fff;

    .list_ul_li_container {
      .b_container {
        ul {
          display: grid;
          grid-template-columns: repeat(1, 1fr);

          li {
            padding: 0;
            box-sizing: border-box;
            border-radius: var(--allLevels-border-radius-pc);
          }
        }

        .t_data {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .level_img {
            display: block;
            margin-right: 0.3rem;
            width: 1rem;
          }

          .level_box_info {
            width: 100%;
            text-align: left;
            font-size: 0.32rem;

            .level_name {
              color: var(--theme-color3);
              margin-bottom: 0.15rem;
            }
          }

          .level_btn {
            position: relative;
            font-size: 0.34rem;
            font-weight: 700;
            color: var(--theme-dec3);
            background: var(--theme-dec4);
            width: 4rem;
            height: 1rem;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: var(--border-radius);
            box-sizing: border-box;

            .sl_box_shadow {
              cursor: pointer;
              -webkit-user-select: none;
              user-select: none;
              border-radius: 0.2rem;
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              box-sizing: border-box;

              div:nth-child(1) {
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                  margin-right: 0.08rem;
                  width: 0.5rem;
                  vertical-align: middle;
                  transform: translateY(-0.04rem);
                }

                span {
                  font-weight: 700;
                }
              }

              div:nth-child(2) {
                font-weight: 700;
              }
            }

            .mask {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              z-index: 1;
              background: var(--mask-color);
              border-radius: var(--border-radius);
            }
          }
        }

        .el-progress_box {
          width: 4.81rem;
          margin-left: 1.3rem;
          margin-top: 0.25rem;
          margin-bottom: 0.3rem;

          .el-progress-bar {
            box-sizing: border-box;
            flex-grow: 1;

            &__outer {
              background: var(--theme-black);
              height: 0.2rem !important;
              border-radius: 0.2rem;
              overflow: hidden;
              position: relative;
              vertical-align: middle;

              .el-progress-bar__inner {
                background-color: var(--theme-dec4) !important;
                border-radius: 0.2rem;
                height: 100%;
                left: 0;
                line-height: 1;
                position: absolute;
                text-align: right;
                top: 0;
                transition: width 0.6s ease;
                white-space: nowrap;

                &:after {
                  content: "";
                  display: inline-block;
                  height: 100%;
                  vertical-align: middle;
                }
              }
            }
          }
        }

        .p_txt {
          margin-bottom: 0.41rem;
          font-size: 0.36rem;
          text-align: center;
        }

        .level_rule_box {
          border-radius: 0.2rem;
          padding: 0.3rem;
          background: var(--theme-color3);

          &_title {
            margin-bottom: 0.3rem;
            font-size: var(--font-title2);
            font-weight: 600;
          }

          &_info {
            width: 100%;
            font-size: var(--font-size2);
            position: relative;
            box-sizing: border-box;

            .txt {
              margin-bottom: 0.3rem;
              display: flex;
              justify-content: space-between;

              &:nth-child(3) {
                margin-bottom: 0.8rem;

                &:after {
                  content: "";
                  display: block;
                  width: 100%;
                  height: 0.02rem;
                  background: linear-gradient(
                    to right,
                    transparent 0%,
                    transparent 10%,
                    var(--theme-color8) 50%,
                    transparent 90%,
                    transparent 100%
                  );
                  position: absolute;
                  bottom: 0.7rem;
                  left: 0;
                  right: 0;
                }
              }

              div:nth-child(1) {
                font-size: 0.32rem;
                opacity: 0.6;
              }

              div:nth-child(2) {
                font-size: 0.32rem;
                font-weight: 600;
                color: var(--theme-neutral1);
              }
            }
          }

          .rate_list {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            margin-top: 0.3rem;

            &_box {
              text-align: center;
              color: var(--theme-neutral1);
              display: flex;
              width: 100%;
              justify-content: space-between;
              flex-direction: row-reverse;
              margin-bottom: 0.3rem;

              div:nth-child(1) {
                font-size: 0.32rem;
                font-weight: 600;
              }

              div:nth-child(2) {
                font-size: 0.32rem;
                opacity: 0.6;
              }
            }
          }
        }
      }
    }
  }
}
</style>
